<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#fff" size="26"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">转售订单</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right"></view>
			</view>
		</u-navbar>
		
		<view class="tabBox">
			<u-tabs activeStyle="color:#2C1769;font-size: 30upx;font-weight: 800;transform:scale(1.08)" :current="tabIndex"
			 inactiveStyle="color: #666;transition: all 0.5s;font-size: 30upx;transform:scale(1)"
			lineColor="#FE5400" lineWidth="32upx" itemStyle="height:72upx" :list="tabList" @change="tabListChange"></u-tabs>
		</view>
		<view class="uni-tab-content">
			<swiper class="swiper" :interval="2000" :duration="500" :autoplay="false" @change="swiperChange"
				 :current="tabIndex" >
				<swiper-item class="swiper-item" v-for="(val,i) in tabList" :key="i">
					<view class="swiper-box">
						<scroll-view scroll-y class="list" @scrolltolower="scrolltolower(2)">
							<view class="acticities" @tap="seeDetails(item)" v-for="(item,index1) in val.list" :key="index1">
								<view class="order-number">
									<view class="orderId">
										<view>
											订单编号: {{item.orderNo}}
										</view>
									</view>
										<!--payStatus  1支付成功0支付失败2待支付3已取消 -->
									<view class="time" v-if="item.payStatus==2">
										<text class="name">剩余时长</text>
										<text class="value">
											<u-count-down :time="item.countdown" format="mm:ss"
												@finish="finishFn(tabIndex,index1,item.payStatus)">
											</u-count-down>
										</text>
									</view>
									<view class="sgTxt" v-show="item.payStatus!=2">
										<text class="name">{{item.orderTypeT}}</text>
									</view>
								</view>
								<view class="show-box">
									<view class="fileBox">
										<image v-if="isImage(item.fileUrl)"
											:src="pathImg+item.fileUrl+'?x-oss-process=image/format,png'"
											mode="widthFix">
										</image>
										<image v-else :src="pathImg+item.fileUrl+'?x-oss-process=video/snapshot,t_20,f_jpg'"
											mode="widthFix" class="img">
										</image>
									</view>
									
									<view class="goods_info">
										<view class="first-line">
											{{item.collectionName}}
										</view>
										<view class="price">
											<text>￥{{item.copeMoney}}</text>
											<view v-show="item.payStatus == 2">去支付</view>
											<view v-show="item.payStatus != 2">{{item.orderType==1?"受让":"转让"}}</view>
										</view>
									</view>
								</view>
							</view>
							<view v-if="val.list.length == 0">
								<view class="noData">
									<image class="noDataImg" src="../../static/noData.png" mode=""></image>
								</view>
							</view>
						</scroll-view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {
		getResaleorder
	} from '../../api/user.js'
	import {
		getUser
	} from '@/api/login.js'
	export default {
		data() {
			return {
				tabIndex:0,
				tabList: [
					{name:"全部",list:[],status:""},
					{name:"受让",list:[],status:"1"},
					{name:"转让",list:[],status:"2"},
				],
				listQuery1: {
					pages: 0,
					page: 1,
					orderType:"",
					pageSize: 10,
					status:"1",//1已完成2待支付3已取消
					keyName: '',//	搜索词 订单号 藏品名称
				},
			};
		},
		onShow() {
			this.getResaleOrderList();
		},
		methods: {
			seeDetails(cur){
				uni.navigateTo({
					url:`/pages/user/orderDetails?id=${cur.id}&type=0`
				});
			},
			tabListChange(e){//tab切换
				this.tabIndex = e.index;
				this.listQuery1.orderType = e.status;
				this.listQuery1.page = 1;
				this.listQuery1.pages = 1;
				this.getResaleOrderList();
			},
			swiperChange(e){
				let current = e.detail.current;
				if(this.tabIndex != current){
					this.tabIndex = current;
					this.listQuery1.orderType = this.tabList[current].status;
					this.listQuery1.page = 1;
					this.listQuery1.pages = 1;
					this.getResaleOrderList();
				}
			},
			getResaleOrderList(){//转售订单
				this.$nextTick(()=>{
					this.$refs.min_loading.open('加载中，请稍后！');
				});
				getResaleorder(this.listQuery1).then(res => {
					if (res.data.success) {
						let list = res.data.obj.list;
						this.listQuery1.pages = res.data.obj.pages;
						if (list.length == 0) {
							return;
						}
						
						let newList = list.filter((item, index) => {
							// 1支付成功0支付失败2待支付3已取消
							if(item.payStatus == 0){
								item["orderTypeT"] = "支付失败";
							}else if(item.payStatus == 1){
								item["orderTypeT"] = "已成功";
							}else if(item.payStatus == 2){
								item["orderTypeT"] = "待支付";
							}else if(item.payStatus == 3){
								item["orderTypeT"] = "已取消";
							}
							if(item.payEndTime){
								item.countdown = this.moment(item.payEndTime).diff(new Date().getTime())
							}
							return item;
						});
						
						if (this.listQuery1.page == 1) {
							this.tabList[this.tabIndex].list = [...newList];
						} else {
							this.tabList[this.tabIndex].list = [...this.tabList[this.tabIndex].list,...newList];
						}
					}
				}).finally(() => {
					this.$refs.min_loading.close();
				});
			},
			// 判断这个地址是视频还是图片
			isImage(url) {
				if (!url) {
					return
				}
				let filePath = url.toLocaleLowerCase();
				if (filePath.indexOf(".mp4") != -1) {
					return false;
				} else {
					return true;
				}
			},
			finishFn(i,index, status) {
				// <!--payStatus  1支付成功0支付失败2待支付3已取消 -->
				if (status == 2) {
					this.tabList[i].list[index].status = 3;
				}
			},
			scrolltolower(i) {
				if(this.listQuery1.pages > this.listQuery1.page){
					this.listQuery1.page++;
					this.getResaleOrderList();
				}else{
					// this.isEnd = true;
				}
			},
			back() {
				let canNavBack = getCurrentPages();
				if(canNavBack && canNavBack.length>1) {  
				    uni.navigateBack({  
				      delta: 1  
				    });  
				} else {  
				    history.back();  
				}
			}
		},
	}
</script>

<style lang="less" scoped>
	page{width: 100%;height: 100%;}
	.con-box {
		padding-top: 120upx;
		width: 100%;
		height: 100%;
		.tabBox{
			width: 100%;
			padding:0upx 10upx;
		}
		.logoBox{
			width: 100%;
			height: 100%;
			.navBox{
				height: 120upx;
				background-image: url("@/static/common/bg1.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
		}
		.uni-tab-content {
			width: 100%;
			height: calc(100% - 90upx);
			.swiper{
				width: 100%;
				height: 100%;
				.swiper-item{
					width: 100%;
					height: 100%;
				}
			}
			
			.swiper-box {
				width: 100%;
				height: 100%;
				.noData{
					position: absolute;
					width: 220upx;
					height: 180upx;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					.noDataImg{
						width: 220upx;
						height: 180upx;
					}
				}
				.list {
					height: 100%;
					width: 100%;
					padding-top: 30upx;
					.acticities {
						width: 100%;
						height: auto;
						background: #fff;
						padding: 0 30upx;
						margin-bottom: 20upx;
						padding-bottom: 30upx;
						.order-number {
							width: 100%;
							display: flex;
							justify-content: space-between;
							font-size: 24upx;
							padding-top: 30upx;
							padding-bottom: 20upx;
							margin-bottom: 30upx;
							border-bottom: 1px solid #F7F7F7;
							.orderId {
								flex: 1%;
								padding-right: 30upx;
								line-height:24upx;
								text-align: left;
								color: #333;
								overflow:hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								-o-text-overflow:ellipsis;
							}
							.sgTxt{
								text-align: right;
								color: #2C1769;
								line-height: 24upx;
							}
							
							.time {
								display: flex;
								align-items: center;
								justify-content: flex-end;
								width: 200upx;
								.name {
									font-family: PingFang SC;
									font-style: normal;
									font-weight: normal;
									font-size: 22upx;
									color: #333;
									mix-blend-mode: normal;
									opacity: 0.4;
									margin-right: 12upx;
									line-height: 24upx;
								}
						
								.value {
									font-family: PingFang SC;
									font-style: normal;
									font-weight: 600;
									mix-blend-mode: normal;
						
									/deep/.u-count-down__text {
										font-size: 24upx;
										line-height: 24upx;
										color: #DBB44E;
									}
								}
							}
						}

						.show-box {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: flex-start;
							.fileBox{
								width: 160upx;
								height: 160upx;
								display: flex;
								align-items: center;
								justify-content: center;
								image {
									width: 100%;
								}
							}
							.goods_info{
								padding-left: 18upx;
								flex: 1%;
								display: flex;
								flex-wrap: wrap;
								align-content: space-between;
								height: 160upx;
								.first-line{
									width: 100%;
									font-size: 24upx;
									color: #111;
								}
								.price{
									width: 100%;
									color: #EB5703;
									font-size: 30upx;
									display: flex;
									justify-content: space-between;
									align-items: center;
									>view{
										font-size: 26upx;
									}
								}
							}
						}
					}
				}
			}
		}
	}

	.feedback {
		background: rgba(255, 255, 255, 0.06);
		color: #fff;
		display: flex;
		align-items: center;
		font-size: 26upx;
		margin-left: 10upx;
		height: 60upx;
		padding: 0 15upx;
		position: absolute;
		top: 50upx;
		right: 50upx;
	}
</style>